<template>
	<view class="login-page" style="position: relative;">
		<uni-nav-bar :statusBar="true" :fixed="true" :border='false' color="#113A62" backgroundColor="#E3EDF7" left-icon="back"
			 title="忘记密码" @clickLeft="back"/>
		<view class="login-warp">
			<form class="form-warp" @submit="formSubmit">
				<view style="padding-top: 30px;" class="textSize">
					新密码
				</view>
				<view class="input-group">
					<input type="password" v-model="pwd" name="pwd" placeholder="请输入新密码" />
				</view>
				<view class="textSize">
					确认密码
				</view>
				<view class="input-group">
					<input type="password" v-model="repwd" name="repwd" placeholder="请输入确认密码" />
				</view>
				<view class="textSize">
					手机
				</view>
				<view class="input-group" style="display: flex;justify-content: space-between">
					<input style="width: 65%;" type="number" v-model="phone" name="phone" placeholder="请输入您的手机号" />
					<button v-if="btnFlag" style="width: 104px;font-size: 16px;margin: 0 !important;background-color: #E3EDF7 !important;color: #113A62;opacity: 0.7;" class="uni-button">{{btnNumber}}S</button>
					<button v-else @click="getCode()" style="width: 104px;font-size: 16px;margin: 0 !important;background-color: #E3EDF7 !important;color: #113A62;opacity: 0.7;" class="uni-button">发送短信</button>
				</view>
				<view class="textSize">
					验证码
				</view>
				<view class="input-group">
					<input v-model="verifyCode" name="verifyCode" placeholder="请输入验证码" />
				</view>
				<button style="margin-top: 60px;" form-type="submit" class="uni-button">确认</button>
			</form>
		</view>
		
		<!-- 成功失败提示 -->
		<view v-if="isSuccess == 0 || isSuccess == 1" :class="isSuccess == 0 ? 'success' : 'error'">
			<view class="success_title">
				<view>
					<image v-show="isSuccess == 0" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/success.png" mode=""></image>
					<image v-show="isSuccess == 1" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/error.png" mode=""></image>
					<text class="success_text">通知</text>
				</view>
				<view>
					<image @click="successClose()" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:middle;" src="../../static/image/searchClose.png" mode=""></image>
				</view>
				
			</view>
			<view class="success_content">
				{{successContent}}
			</view>
		</view>
		
	</view>
</template>
<script>
	var that;
	
	export default {
		data() {
			return {
				pwd: '', // 姓名
				repwd: '', // 邮箱
				phone: '', // 手机号
				verifyCode:'', // 验证码
				btnFlag: false, // 短信验证码倒计时
				btnNumber: 60, // 短信验证码倒计时
				isSuccess: null,
				successContent: '', // 报错提示内容
			}
		},
		onLoad() {
			that = this;
		},
		methods: {
			successClose(){
				that.isSuccess = null
			},
			// 获取验证码
			getCode(){
				var phoneReg=/^1[3-9][0-9]{9}$/
				if(phoneReg.test(that.phone)){
					that.btnFlag = true
					let timeSet = setInterval(()=>{
						that.btnNumber -= 1
						if(that.btnNumber == 0){
							clearInterval(timeSet)
							that.btnFlag = false
							that.btnNumber = 60
						}
					},1000)
					that.$http.get('data/person/sendVerifyCode3', {
						phone:that.phone,
					}).then(e => {
					}).catch((e)=>{
						console.log('e',e)
						if(e){
							that.successContent = e
						}else{
							that.successContent = '获取验证码失败！'
						}
						that.isSuccess = 1
						setTimeout(function(){
							that.isSuccess = null
						},2000)
					})
				}else{
					that.successContent = '手机号格式不正确'
					that.isSuccess = 1
					setTimeout(function(){
						that.isSuccess = null
					},2000)
				}
				
			},
			formSubmit(e) {
				var formdata = e.detail.value;
				if (that.validate(formdata)) {
					formdata.fsiteNo = that.fsiteNo
					console.log('formdata',formdata)
					if(formdata.pwd && formdata.phone &&formdata.verifyCode){
						if(formdata.pwd == formdata.repwd){
							let temp ={
								newPwd: formdata.pwd,
								phone: formdata.phone,
								verifyCode: formdata.verifyCode
							}
							console.log('temp',temp)
							that.$http.post('data/person/pwdModify2',temp)
							.then(e => {
								that.successContent = '密码修改成功！'
								that.isSuccess = 0
								setTimeout(function(){
									that.isSuccess = null
									that.$util.reLaunch('login/index');
								},2000)
							}).catch((e) => {
								if(e){
									that.successContent = e
								}else{
									that.successContent = '密码修改失败！'
								}
								that.isSuccess = 1
								setTimeout(function(){
									that.isSuccess = null
								},2000)
							});
						}else{
							that.successContent = '两次密码输入不一致！'
							that.isSuccess = 1
							setTimeout(function(){
								that.isSuccess = null
							},2000)
						}
					}else{
						that.successContent = '请将信息填写完整再确认！'
						that.isSuccess = 1
						setTimeout(function(){
							that.isSuccess = null
						},2000)
					}
				}
			},
			validate(formdata) {
				// if (!that.$util.validate(formdata.uid, "账号不能为空")) return false;
				// if (!that.$util.validate(formdata.upwd, "密码不能为空")) return false;
				return true;
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>
<style>
	@import url("register.css");
	.success{
		width: 80%;
		height: 116px;
		background: linear-gradient(0deg, rgba(225, 255, 220, 0.5), rgba(225, 255, 220, 0.5)), #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 16px;
	}
	.error{
		width: 80%;
		height: 116px;
		background: linear-gradient(0deg, rgba(255, 40, 40, 0.2), rgba(255, 40, 40, 0.2)), #FFFFFF;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 16px;
	}
	.success_title{
		width: 100%;
		display: flex;
		justify-content: space-between;
		/* padding: 18px; */
	}
	.success_text{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 28px;
		color: #113A62;
		margin-left: 10px;
	}
	.success_content{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: #113A62;
		margin-top: 6px;
	}
</style>
